<template>
    <div class="community-wrapper">
        <NavButtons />

        <div class="ct" id="t1">
            <div class="ct" id="t2">
                <div class="ct" id="t3">
                    <div class="ct" id="t4">
                        <section>
                            <!-- 左侧导航图标 -->
                            <ul>
                                <a href="#t1">
                                    <li class="icon fa fa-home" id="uno"></li>
                                </a>
                                <a href="#t2">
                                    <li class="icon fa fa-comments" id="dos"></li>
                                </a>
                                <a href="#t3">
                                    <li class="icon fa fa-shopping-cart" id="tres"></li>
                                </a>
                                <a href="#t4">
                                    <li class="icon fa fa-info-circle" id="cuatro"></li>
                                </a>
                            </ul>

                            <!-- 四个页面内容 -->
                            <div class="page" id="p1">
                                <li class="icon fa fa-home">
                                    <span class="title">社区首页</span>
                                    <span class="hint">欢迎来到复古游戏社区</span>
                                </li>
                            </div>

                            <div class="page" id="p2">
                                <DiscussionBlock />
                            </div>

                            <div class="page" id="p3">
                                <ShopBlock />
                            </div>

                            <div class="page" id="p4">
                                <li class="icon fa fa-info-circle">
                                    <span class="title">关于我们</span>
                                    <span class="hint">本项目用于JAVA课程设计期末大作业</span>
                                </li>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import NavButtons from '/src/components/NavButtons.vue'
import DiscussionBlock from '@/components/community/DiscussionBlock.vue'
import ShopBlock from '@/components/community/ShopBlock.vue'
</script>

<style scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css');

/* ✅ 修复顶部白块核心结构 */
.community-wrapper {
    height: 100vh;
    overflow: hidden;
}

.ct {
    height: 100%;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* 动画与排版 */
* {
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
}

html,
body,
section,
.page {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transition: all 1s cubic-bezier(.5, -0.005, 0.2, 1) !important;
    -webkit-transition: all 1s cubic-bezier(.5, -0.005, 0.2, 1) !important;
    color: #fff;
    background: #374046;
}

section {
    width: 400%;
}

.page {
    position: absolute;
    overflow-y: auto;
    padding: 80px 20px 20px;
    /* 顶部留出空隙防止被导航栏遮挡 */
    box-sizing: border-box;
}

#p1 {
    left: 0;
}

#p2 {
    left: 100%;
    background: #FF5722;
}

#p3 {
    left: 200%;
    background: #593C1F;
}

#p4 {
    left: 300%;
    background: deeppink;
}

/* 滑动逻辑控制 */
#t1:target .page#p1 {
    transform: translateX(0);
}

#t2:target .page#p2 {
    transform: translateX(-90%);
}

#t3:target .page#p3 {
    transform: translateX(-190%);
}

#t4:target .page#p4 {
    transform: translateX(-290%);
}

/* 第1页模糊过渡 */
#t2:target .page#p1,
#t3:target .page#p1,
#t4:target .page#p1 {
    background: black;
}

#t2:target .page#p1 .icon,
#t3:target .page#p1 .icon,
#t4:target .page#p1 .icon {
    filter: blur(3px);
}

.icon {
    color: #fff;
    font-size: 32px;
    display: block;
}

ul .icon:hover {
    opacity: 0.6;
}

.title,
.hint {
    font-family: open sans, sans-serif;
    display: block;
}

.title {
    font-size: 38px;
}

.hint {
    font-size: 13px;
}

.hint a {
    color: #EFFF06;
    transition: all 250ms easet-out;
}

.hint a:hover {
    color: #FFF;
}

ul {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 280px;
    width: 10%;
    padding: 0;
    text-align: center;
    z-index: 10;
}

ul li {
    margin: 30px 0;
}

a {
    text-decoration: none;
    font-family: open sans, sans-serif;
}

/* 中心图标内容动画 */
.page .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10%;
    left: 0;
    width: 270px;
    height: 170px;
    margin: auto;
    text-align: center;
    font-size: 80px;
    transform: translateX(360%);
    line-height: 1.3;
}

.page#p1 .icon {
    height: 220px;
    transform: translateX(0) !important;
}

#t2:target .page#p2 .icon,
#t3:target .page#p3 .icon,
#t4:target .page#p4 .icon {
    transform: translateX(0) !important;
    transition-delay: 1s;
}

/* 小图标动画效果 */
#t2:target ul .icon,
#t3:target ul .icon,
#t4:target ul .icon {
    transform: scale(.6);
    transition-delay: .25s;
}

#t2:target #dos {
    transform: scale(1.2) !important;
}

#t3:target #tres {
    transform: scale(1.2) !important;
}

#t4:target #cuatro {
    transform: scale(1.2) !important;
}
</style>
